<script setup lang="ts">
import Header from "../../components/Header/index.vue";
import Aside from "../../components/Aside/index.vue"
import {onMounted} from "vue";
import {getUserInfo} from "@/service/api";
import {useUserStore} from "@/stores";

const userStore = useUserStore();
const {setUserInformation} = userStore;
onMounted(async () => {
  const {data} = await getUserInfo();
  setUserInformation(data.data)
})

</script>

<template>
  <div class="common-layout">
    <el-container>
      <el-aside width="200px">
        <Aside></Aside>
      </el-aside>
      <el-container>
        <el-header>
          <Header></Header>
        </el-header>
        <el-main>
          <RouterView></RouterView>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<style scoped lang="less">
:deep(.el-header) {
  padding: 0;
  border-bottom: 0;
}

:deep(.header-box[data-v-eef40c4c]) {
  border-bottom: 0;
}

:deep(.el-aside) {
  height: 100vh;
  background-color: #24323f;
  min-height: 90%;
}
</style>
